<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>分析生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root" :x="n">
			<h2 v-text="n"></h2>
			<h2>当前的n值是：{{n}}</h2>
			<button @click="add">点我n+1</button>
			<button @click="bye">点我销毁vm</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			// template:`
			// 	<div>
			// 		<h2>当前的n值是：{{n}}</h2>
			// 		<button @click="add">点我n+1</button>
			// 	</div>
			// `,
			data:{
				n:1
			},
			methods: {
				add(){
					console.log('add')
					this.n++
				},
				bye(){
					console.log('bye')
					this.$destroy()
				}
			},
			watch:{
				n(){
					console.log('n变了')
				}
			},
			beforeCreate() {  //此时无法通过vm访问到data中的数据，method中的方法。
				console.log('beforeCreate')
			},
			created() { //此时可以通过vm访问到data中的数据、method中的配置的方法。（如果不需要操作dom，此时可以初始化查询列表）
				console.log('created')
			},
			beforeMount() { //页面呈现的时未经vue编译的Dom结构，所以对dom的操作，最终都不奏效
				console.log('beforeMount')
			},
			mounted() {  //页面呈现的时经过vue编译的Dom结构，至此初始化结束。（可以发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。）
				console.log('mounted')
			},
			beforeUpdate() { //此时数据时新的，但是页面还是旧的，即页面还没和数据同步
				console.log('beforeUpdate')
			},
			updated() { //根据新数据生成新的Dom，然后把新的dom与旧的dom进行比较，完成页面的更新，即：完成了Model->view的转化。此阶段改数据还是可以生效的。
				console.log('updated')
			},
			beforeDestroy() { //此时vm中所有的data、methods、指令等等都处于可用的状态，马上要执行销毁的过程，但是现在执行的方法不会再触发更新操作（一般在此阶段关闭定时器，取消订阅消息，解绑自定义事件等收尾操作。）
				console.log('beforeDestroy')
			},
			destroyed() {  //完全销毁一个实例。清理它与其他实例的连接，解绑它的全部指令以及自定义事件监听器。
				console.log('destroyed')
			},
		})
	</script>
</html>